<template>
	<view class="container" :style="{background: 'url(' + data.backgroundImage + ') no-repeat'}">
		<Header>首页</Header>
		<view class="main p-l-r-32">
			<view class="ad" v-if="data.list1.length>0">
				<view class="ad-img">
					<u-swiper :display-multiple-items="arrayGet(data,'list1',[]).length"
						:list="arrayGet(data,'list1',[])" :height="auto" :indicator="true"
						indicatorMode="line"></u-swiper>
				</view>
			</view>
			<u-button v-if="!isLogin" type="primary" @click="goRedirect('/pages/alogin/index')" text="登录/注册"></u-button>
			<view class="flex justify-space-between" style="margin-top: 12rpx;">
				<view class="hot-title"> 热门模板</view>
				<view class="more-text flex" @click="goSwitchTab(`${pageUrl.common.pageListUrl}`)"> 更多 <u-icon
						name="arrow-right" color="#fff" size='15px'></u-icon>
				</view>
				<!-- <u-tag v-else text="立即登录/注册" @click="goRedirect('/pages/alogin/index')" type="success"></u-tag> -->
			</view>
			<!-- <scroll-view scroll-y class="hot-article article-h"> -->
			<z-paging ref="paging" v-model="data.dataList" :top="isLogin?'550':'630'" @query="queryList">
				<view class="article-box">
					<view class="list-item flex" @click="goNav(`${pageUrl.common.pageDetailUrl}?id=${item.article_id}`)"
						v-for="(item,index) in data.dataList" :key="index">
						<view>
							<image class="article-image" :src="arrayGet(item, 'article_image.thumbnail_path_url')"
								mode="cover"></image>
						</view>
						<view>
							<text class="title">{{ item.article_title }}</text>
							<view class="text-content line-clamp-2">{{ item.article_summary }}
							</view>
						</view>
					</view>
				</view>
				<template #bottom>
					<view style='height:120rpx;'></view>
				</template>
			</z-paging>
			<!-- </scroll-view> -->
		</view>
		<Tabbar :current-page="0"></Tabbar>
	</view>
</template>
<script setup>
	import {
		bannerList,
		hotRecommend,
		background,
		hotRecommendPage
	} from "../../api/module/home.js"
	import Header from "@/components/Header.vue"
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive
	} from 'vue';
	import {
		arrayGet,
		arrayPluck,
		goNav,
		goRedirect,
		goSwitchTab,
		pageUrl
	} from "../../utils/common";
	let paging = ref(null)
	let data = reactive({
		dataList: [],
		list1: [],
		backgroundImage: "",
	});
	let show = ref(false);
	let content = ref('');
	const isLogin = ref(true);
	onLoad(() => {
		// getHotRecommend();
		getBannerList();
		getBackground();
	})
	onShow(() => {
		if (uni.getStorageSync("token")) {
			isLogin.value = true;
		} else {
			isLogin.value = false;
		}
	})
	const queryList = (pageNo, pageSize) => {
		let params = {
			page: pageNo,
			limit: pageSize
		}
		hotRecommendPage(params).then(res => {
			console.log(res);
			paging.value.complete(res.data);
		})
	}
	const getHotRecommend = () => {
		hotRecommend({
			limit: 6
		}).then(res => {
			data.dataList = res
		})
	}
	const getBannerList = () => {
		let params = {
			platform: 'mini_program',
			position_type: 'index',
			source_type: 'jzb',
		}
		bannerList(params).then(res => {
			data.list1 = arrayPluck(res, 'image');
		})
	}
	const getBackground = () => {
		background({}).then(res => {
			data.backgroundImage = arrayGet(res, 'setting_image_image.path_url');
		})
	}
</script>
<style lang="scss" scoped>
	.container {
		background-repeat: no-repeat;
		background-size: contain !important;
		width: 100%;
		height: 100vh;
		// display: flex;
	}

	.header {
		width: 100%;
		display: flex;
		flex-direction: column;

		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}

		.status_title {
			height: 44px;
			padding: 0 16px;
			text-align: center;
			color: #fff;
			line-height: 44px;
		}
	}

	.main {
		margin-top: 32rpx;
		margin-bottom: 20rpx;
		color: #fff;

		.ad {
			// height: 300rpx;
			width: 100%;
			margin-bottom: 26rpx;

			.ad-img {
				height: auto;
				background: rgba(236, 242, 254, 0.6);
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 57, 197, 0.1), 0rpx 4rpx 8rpx 0rpx rgba(0, 28, 82, 0.05);
				border-radius: 16rpx;
				border-image: linear-gradient(137deg, rgba(233, 240, 255, 1), rgba(173, 201, 254, 1)) 2 2;
			}
		}

		.article-image {
			background-size: cover;
		}

		.hot-title {
			font-weight: 500;
			font-size: 30rpx;
			line-height: 42rpx;
		}

		.article-h {
			height: calc(100vh - 670rpx);
			margin-top: 24rpx;
		}

		.more-text {
			font-size: 26rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 36rpx;
			justify-content: center;
			align-items: center;
		}

		.hot-article {
			margin-top: 24rpx;
		}
	}

	.article-box {
		padding: 0rpx 32rpx;
	}

	// :deep(.z-paging-content) {
	// 	top: 630rpx !important;
	// }
</style>
